import React, { Component } from 'react';
const STATUS_ITEM = 0;
class TodoListItem extends Component {
    constructor(props) {
        super(props);
        this.state = {}

    }
    updateFinished() {
        this.props.updateFinished();
    }
    // 删除任务
    handleClickDelete(Uuid) {
        this.props.handleClickDelete(Uuid);
    }
    // 点击完成事件
    handleClickFinished = (Uuid) => {
        const obj = [];
        const { list } = this.props;
        list.forEach((item) => {
            if (item.uuid === Uuid) {
                if (item.status === STATUS_ITEM) {
                    item.status = !STATUS_ITEM;
                } else {
                    item.status = STATUS_ITEM;
                }
                this.updateFinished();
                this.setState({
                    list: obj
                });
            }
            else {
                obj.push(item);
            }
        })
    }
    listMapItem = (item) => {
        return (
            <div className="warpper"
                key={item.uuid}
            >
                <div className="item">
                    <input type="checkbox"
                        defaultChecked={item.status}
                        onClick={this.handleClickFinished.bind(this, item.uuid)}
                    />
                    <span
                        style={{ textDecorationLine: item.status === STATUS_ITEM ? 'none' : 'line-through' }}
                    >{item.content}
                    </span>
                </div>

                <div className="startTime">
                    {item.startTime}
                </div>
                <button
                    className="delete-button "
                    onClick={this.handleClickDelete.bind(this, item.uuid)}
                >
                    删除
                    </button>
            </div>
        );
    }
    listMap = () => {
        const { list = [] } = this.props;
        return (
            list.map(item => {
                return (this.listMapItem(item))
            })
        )
    }
    render() {
        return (
            <div>
                {this.listMap()}
            </div>
        );
    }
}

export default TodoListItem;